<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷点名册系统 - 分区域版</title>
    <style>
        :root {
            --primary: #4e54c8;
            --secondary: #8f94fb;
            --success: #38c172;
            --danger: #e3342f;
            --warning: #f6993f;
            --dark: #2d3748;
            --light: #f8f9fa;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--light);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #fff, #e0e7ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            margin: 10px;
            min-width: 150px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-item:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 5px;
            background: linear-gradient(45deg, #fff, #e0e7ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
        }

        .section {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .section-info {
            font-size: 0.9rem;
            opacity: 0.8;
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 10px;
            border-radius: 20px;
        }

        .result-area {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            text-align: center;
            padding: 15px;
            overflow: hidden;
        }

        .highlight {
            animation: highlight 1s ease;
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }

        @keyframes highlight {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1.05); }
        }

        .recent-indicator {
            text-align: center;
            color: var(--warning);
            margin-bottom: 15px;
            font-size: 0.9rem;
            display: none;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        button {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        button:active {
            transform: translateY(0);
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
        }

        .btn-success {
            background: linear-gradient(45deg, var(--success), #4ade80);
            color: white;
        }

        .btn-warning {
            background: linear-gradient(45deg, var(--warning), #fbbf24);
            color: white;
        }

        .btn-danger {
            background: linear-gradient(45deg, var(--danger), #f87171);
            color: white;
        }

        .btn-stop {
            background: linear-gradient(45deg, #dc2626, #ef4444);
            color: white;
        }

        .history-section {
            margin-top: 20px;
        }

        .history-title {
            font-size: 1.1rem;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .history-list {
            list-style: none;
            max-height: 200px;
            overflow-y: auto;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            transition: background 0.3s ease;
        }

        .history-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .history-name {
            font-weight: bold;
        }

        .history-date {
            font-size: 0.8rem;
            opacity: 0.7;
        }

        /* 速度控制滑块样式 */
        .speed-control {
            margin: 15px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .speed-slider {
            width: 100%;
            margin: 10px 0;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            outline: none;
        }

        .speed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .speed-value {
            text-align: center;
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* 删除按钮样式 */
        .delete-btn {
            background: none;
            border: none;
            color: var(--danger);
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0 5px;
            margin-left: 10px;
            transition: all 0.3s ease;
        }

        .delete-btn:hover {
            transform: scale(1.2);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            padding: 25px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .close {
            font-size: 1.8rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: var(--danger);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        textarea {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1rem;
            resize: vertical;
            min-height: 150px;
        }

        textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .import-info {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-bottom: 20px;
        }

        /* 悬浮按钮 */
        .floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 100;
        }

        .floating-btn:hover {
            transform: translateY(-5px) rotate(15deg);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 25px;
            background: var(--success);
            color: white;
            border-radius: 50px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }

        .toast.show {
            opacity: 1;
        }

        /* 滚动动画 */
        .rolling {
            animation: rolling 0.5s infinite;
        }

        @keyframes rolling {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>炫酷点名册系统</h1>
        <p>分区域点名 - 点名区3天内不重复，问答区可重复</p>
    </header>

    <div class="stats">
        <div class="stat-item">
            <div class="stat-value" id="total-names">0</div>
            <div class="stat-label">总人数</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="roll-call-today">0</div>
            <div class="stat-label">今日点名</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="qa-today">0</div>
            <div class="stat-label">今日问答</div>
        </div>
    </div>

    <div class="dashboard">
        <!-- 点名区 -->
        <div class="section roll-call-section">
            <div class="section-header">
                <div class="section-title">点名区</div>
                <div class="section-info">3天内不重复点名</div>
            </div>

            <!-- 速度控制滑块 -->
            <div class="speed-control">
                <label>名字滚动速度:</label>
                <input type="range" min="50" max="500" value="200" class="speed-slider" id="roll-call-speed">
                <div class="speed-value" id="roll-call-speed-value">中速</div>
            </div>

            <div class="result-area" id="roll-call-result">
                点击"开始点名"按钮开始
            </div>

            <div class="recent-indicator" id="roll-call-recent">
                该同学3天内已被点过名
            </div>

            <div class="actions">
                <button class="btn-primary" id="roll-call-start" onclick="startRollCallAnimation()">开始点名</button>
                <button class="btn-stop" id="roll-call-stop" onclick="stopRollCallAnimation()" disabled>停止点名</button>
                <button class="btn-danger" id="roll-call-clear" onclick="clearAllData()">清除点名数据</button>


            </div>

            <div class="history-section">
                <div class="history-title">最近点名记录</div>
                <ul class="history-list" id="roll-call-history">
                    <!-- 点名历史将通过JavaScript动态填充 -->
                </ul>
            </div>
        </div>

        <!-- 问答区 -->
        <div class="section qa-section">
            <div class="section-header">
                <div class="section-title">问答区</div>
                <div class="section-info">可重复点名</div>
            </div>

            <!-- 速度控制滑块 -->
            <div class="speed-control">
                <label>名字滚动速度:</label>
                <input type="range" min="50" max="500" value="200" class="speed-slider" id="qa-speed">
                <div class="speed-value" id="qa-speed-value">中速</div>
            </div>

            <div class="result-area" id="qa-result">
                点击"开始提问"按钮开始
            </div>

            <div class="actions">
                <button class="btn-success" id="qa-start" onclick="startQAAnimation()">开始提问</button>
                <button class="btn-stop" id="qa-stop" onclick="stopQAAnimation()" disabled>停止提问</button>
                <button class="btn-danger" id="roll-call-clear" onclick="clearAllQAData()">清除提问数据</button>

            </div>

            <div class="history-section">
                <div class="history-title">最近提问记录</div>
                <ul class="history-list" id="qa-history">
                    <!-- 问答历史将通过JavaScript动态填充 -->
                </ul>
            </div>
        </div>
    </div>

    <div class="actions" style="margin-top: 30px;">
        <button class="btn-warning" onclick="openModal('import-modal')">导入名字</button>
<!--?        <button class="btn-danger" onclick="clearAllData()">清空数据</button>-->
    </div>
</div>

<!-- 导入名字模态框 -->
<div id="import-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>导入名字</h2>
            <span class="close" onclick="closeModal('import-modal')">&times;</span>
        </div>
        <div class="form-group">
            <label for="import-names">请输入名字列表（每行一个名字）</label>
            <textarea id="import-names" placeholder="例如：
张三
李四
王五"></textarea>
        </div>
        <div class="import-info">
            提示：每行输入一个名字，空行将被忽略
        </div>
        <button class="btn-success" onclick="importNames()">导入</button>
    </div>
</div>

<!-- 悬浮按钮 -->
<div class="floating-btn" onclick="startRollCallAnimation()">
    <i>🎲</i>
</div>

<!-- 提示信息 -->
<div class="toast" id="toast"></div>

<script>
    // 全局变量
    let names = [];
    let rollCallHistory = [];
    let qaHistory = [];
    let rollCallAnimation = null;
    let qaAnimation = null;
    let rollCallSpeed = 200; // 默认速度（毫秒）
    let qaSpeed = 200; // 默认速度（毫秒）
    let isRollCallRolling = false;
    let isQARolling = false;

    // 页面加载时获取数据
    document.addEventListener('DOMContentLoaded', function () {
        fetchNames();
        fetchRollCallHistory();
        fetchQAHistory();

        // 设置速度滑块事件监听
        document.getElementById('roll-call-speed').addEventListener('input', function() {
            rollCallSpeed = parseInt(this.value);
            updateSpeedDisplay('roll-call', rollCallSpeed);

            // 如果正在滚动，更新滚动速度
            if (isRollCallRolling && rollCallAnimation) {
                clearInterval(rollCallAnimation);
                startRollCallInterval();
            }
        });

        document.getElementById('qa-speed').addEventListener('input', function() {
            qaSpeed = parseInt(this.value);
            updateSpeedDisplay('qa', qaSpeed);

            // 如果正在滚动，更新滚动速度
            if (isQARolling && qaAnimation) {
                clearInterval(qaAnimation);
                startQAInterval();
            }
        });

        // 初始化速度显示
        updateSpeedDisplay('roll-call', rollCallSpeed);
        updateSpeedDisplay('qa', qaSpeed);
    });

    // 更新速度显示
    function updateSpeedDisplay(type, speed) {
        let speedText = '';
        if (speed < 100) speedText = '极快';
        else if (speed < 150) speedText = '很快';
        else if (speed < 250) speedText = '中速';
        else if (speed < 350) speedText = '较慢';
        else speedText = '慢速';

        document.getElementById(`${type}-speed-value`).textContent = speedText;
    }

    // 获取名字列表
    function fetchNames() {
        fetch('/api/names')
            .then(response => response.json())
            .then(data => {
                names = data;
                updateStats();
            })
            .catch(error => {
                showToast('获取名字列表失败: ' + error, 'error');
            });
    }

    // 获取点名历史
    function fetchRollCallHistory() {
        fetch('/api/history/roll_call')
            .then(response => response.json())
            .then(data => {
                rollCallHistory = data;
                renderRollCallHistory();
                updateStats();
            })
            .catch(error => {
                console.error('获取点名历史失败:', error);
            });
    }

    // 获取问答历史
    function fetchQAHistory() {
        fetch('/api/history/qa')
            .then(response => response.json())
            .then(data => {
                qaHistory = data;
                renderQAHistory();
                updateStats();
            })
            .catch(error => {
                console.error('获取问答历史失败:', error);
            });
    }

    // 渲染点名历史
    function renderRollCallHistory() {
        const historyList = document.getElementById('roll-call-history');
        historyList.innerHTML = '';

        // 显示最近10条记录
        const recentHistory = rollCallHistory.slice(-10).reverse();

        recentHistory.forEach((record, index) => {
            const li = document.createElement('li');
            li.className = 'history-item';
            li.innerHTML = `
                <span class="history-name">${record.name}</span>
                <span class="history-date">${record.date}</span>
                <button class="delete-btn" onclick="deleteRollCallRecord(${rollCallHistory.length - 1 - index})">×</button>
            `;
            historyList.appendChild(li);
        });
    }

    // 渲染问答历史
    function renderQAHistory() {
        const historyList = document.getElementById('qa-history');
        historyList.innerHTML = '';

        // 显示最近10条记录
        const recentHistory = qaHistory.slice(-10).reverse();

        recentHistory.forEach((record, index) => {
            const li = document.createElement('li');
            li.className = 'history-item';
            li.innerHTML = `
                <span class="history-name">${record.name}</span>
                <span class="history-date">${record.date}</span>
                <button class="delete-btn" onclick="deleteQARecord(${qaHistory.length - 1 - index})">×</button>
            `;
            historyList.appendChild(li);
        });
    }

    // 更新统计信息
    function updateStats() {
        document.getElementById('total-names').textContent = names.length;

        // 计算今日点名次数
        const today = new Date().toISOString().split('T')[0];
        const todayRollCall = rollCallHistory.filter(record => record.date === today).length;
        document.getElementById('roll-call-today').textContent = todayRollCall;

        // 计算今日问答次数
        const todayQa = qaHistory.filter(record => record.date.startsWith(today)).length;
        document.getElementById('qa-today').textContent = todayQa;
    }

    // 开始点名区动画
    function startRollCallAnimation() {
        if (names.length === 0) {
            showToast("请先导入名字", 'error');
            return;
        }

        if (isRollCallRolling) return;

        isRollCallRolling = true;
        document.getElementById('roll-call-start').disabled = true;
        document.getElementById('roll-call-stop').disabled = false;
        document.getElementById('roll-call-result').classList.add('rolling');

        startRollCallInterval();
    }

    // 开始点名区滚动间隔
    function startRollCallInterval() {
        if (rollCallAnimation) {
            clearInterval(rollCallAnimation);
        }

        const resultElement = document.getElementById('roll-call-result');

        rollCallAnimation = setInterval(() => {
            const randomIndex = Math.floor(Math.random() * names.length);
            resultElement.innerHTML = names[randomIndex];
        }, rollCallSpeed);
    }

    // 停止点名区动画
    function stopRollCallAnimation() {
        if (!isRollCallRolling) return;

        isRollCallRolling = false;
        clearInterval(rollCallAnimation);
        rollCallAnimation = null;

        document.getElementById('roll-call-start').disabled = false;
        document.getElementById('roll-call-stop').disabled = true;
        document.getElementById('roll-call-result').classList.remove('rolling');

        performRollCall();
    }

    // 执行实际点名
    function performRollCall() {
        fetch('/api/roll_call/random')
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    showToast(data.error, 'error');
                    return;
                }

                const resultElement = document.getElementById('roll-call-result');
                resultElement.innerHTML = data.name;
                resultElement.classList.add('highlight');

                // 显示或隐藏3天内点过提示
                const recentIndicator = document.getElementById('roll-call-recent');
                if (data.is_recent) {
                    recentIndicator.style.display = 'block';
                } else {
                    recentIndicator.style.display = 'none';
                }

                // 移除动画类，以便下次可以再次触发
                setTimeout(() => {
                    resultElement.classList.remove('highlight');
                }, 2000);

                // 刷新历史记录
                fetchRollCallHistory();
            })
            .catch(error => {
                showToast('点名失败: ' + error, 'error');
            });
    }

    // 开始问答区动画
    function startQAAnimation() {
        if (names.length === 0) {
            showToast("请先导入名字", 'error');
            return;
        }

        if (isQARolling) return;

        isQARolling = true;
        document.getElementById('qa-start').disabled = true;
        document.getElementById('qa-stop').disabled = false;
        document.getElementById('qa-result').classList.add('rolling');

        startQAInterval();
    }

    // 开始问答区滚动间隔
    function startQAInterval() {
        if (qaAnimation) {
            clearInterval(qaAnimation);
        }

        const resultElement = document.getElementById('qa-result');

        qaAnimation = setInterval(() => {
            const randomIndex = Math.floor(Math.random() * names.length);
            resultElement.innerHTML = names[randomIndex];
        }, qaSpeed);
    }

    // 停止问答区动画
    function stopQAAnimation() {
        if (!isQARolling) return;

        isQARolling = false;
        clearInterval(qaAnimation);
        qaAnimation = null;

        document.getElementById('qa-start').disabled = false;
        document.getElementById('qa-stop').disabled = true;
        document.getElementById('qa-result').classList.remove('rolling');

        performQA();
    }

    // 执行实际提问
    function performQA() {
        fetch('/api/qa/random')
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    showToast(data.error, 'error');
                    return;
                }

                const resultElement = document.getElementById('qa-result');
                resultElement.innerHTML = data.name;
                resultElement.classList.add('highlight');

                // 移除动画类，以便下次可以再次触发
                setTimeout(() => {
                    resultElement.classList.remove('highlight');
                }, 2000);

                // 刷新历史记录
                fetchQAHistory();
            })
            .catch(error => {
                showToast('提问失败: ' + error, 'error');
            });
    }

    // 删除点名记录
    function deleteRollCallRecord(index) {
        if (!confirm('确定要删除这条点名记录吗？')) {
            return;
        }

        fetch('/api/history/roll_call/delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ index: index })
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                showToast(data.error, 'error');
            } else {
                showToast('删除成功', 'success');
                fetchRollCallHistory();
                updateStats();
            }
        })
        .catch(error => {
            showToast('删除失败: ' + error, 'error');
        });
    }

    // 删除问答记录
    function deleteQARecord(index) {
        if (!confirm('确定要删除这条问答记录吗？')) {
            return;
        }

        fetch('/api/history/qa/delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ index: index })
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                showToast(data.error, 'error');
            } else {
                showToast('删除成功', 'success');
                fetchQAHistory();
                updateStats();
            }
        })
        .catch(error => {
            showToast('删除失败: ' + error, 'error');
        });
    }

    // 导入名字
    function importNames() {
        const importText = document.getElementById('import-names').value;
        const namesList = importText.split('\n')
            .map(name => name.trim())
            .filter(name => name.length > 0);

        if (namesList.length === 0) {
            showToast('请输入至少一个名字', 'error');
            return;
        }

        fetch('/api/names/import', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                names: namesList
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    showToast(data.message, 'success');
                    closeModal('import-modal');
                    document.getElementById('import-names').value = '';
                    // 刷新名字列表
                    fetchNames();
                }
            })
            .catch(error => {
                showToast('导入名字失败: ' + error, 'error');
            });
    }

    // 清空所有点名数据
    function clearAllData() {
        if (!confirm('确定要清空所有数据吗？此操作不可恢复！')) {
            return;
        }

        fetch('/api/clear/roll_call_history', {
            method: 'POST'
        })
            .then(response => response.json())
            .then(data => {
                showToast('数据已清空', 'success');
                // 刷新所有数据
                fetchNames();
                fetchRollCallHistory();
                fetchQAHistory();
            })
            .catch(error => {
                showToast('清空数据失败: ' + error, 'error');
            });
    }

    // 打开模态框
    function openModal(id) {
        document.getElementById(id).style.display = 'flex';
    }

    // 关闭模态框
    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    // 显示提示信息
    function showToast(message, type = 'success') {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.style.background = type === 'success' ? 'var(--success)' : 'var(--danger)';
        toast.classList.add('show');

        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // 点击模态框外部关闭
    window.onclick = function (event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    }

// 清空所有提问数据
    function clearAllQAData() {
        if (!confirm('确定要清空所有提问数据吗？此操作不可恢复！')) {
            return;
        }

        fetch('/api/clear/qa_history', {
            method: 'POST'
        })
            .then(response => response.json())
            .then(data => {
                showToast('提问数据已清空', 'success');
                // 刷新所有数据
                fetchNames();
                fetchRollCallHistory();
                fetchQAHistory();
            })
            .catch(error => {
                showToast('提问清空数据失败: ' + error, 'error');
            });
    }

    // 打开模态框
    function openModal(id) {
        document.getElementById(id).style.display = 'flex';
    }

    // 关闭模态框
    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    // 显示提示信息
    function showToast(message, type = 'success') {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.style.background = type === 'success' ? 'var(--success)' : 'var(--danger)';
        toast.classList.add('show');

        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // 点击模态框外部关闭
    window.onclick = function (event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    }
</script>
</body>
</html>